<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<style>
			[v-cloak] {
				display: none;
			}
			
			html {
				height: 100%;
			}
			
			body {
				height: 100%;
				background-color: white;
			}
			
			.head {
				height: 40px;
			}
			
			#head {
				line-height: 40px;
			}
			
			.head-img {
				width: 40px;
				height: 40px;
			}
			
			#head-img1 {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}
			
			.mui-table-view-cell {
				margin: 0 auto;
				font-size: 14px;
				color: #666;
			}
			
			.mui-icon {
				font-size: 20px;
				color: #27CDDB;
			}
			
			.mui-bar-nav {
				background: #27CDDB;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #FFFFFF;
			}
			/*点击变蓝色高亮*/
			
			.mui-table-view-cell.mui-active {
				background-color: white;
			}
			
			.noborder:after {
				background-color: #FFFFFF!important;
			}
			
			.mui-content {
				background-repeat: no-repeat;
				background-image: url(../images/mainBg.jpg);
				height: 100%;
			}
			
			.heigh {
				border-radius: 5px;
				vertical-align: middle;
				line-height: 30px;
				height: 30px;
				text-align: center;
				background-color: #FFFFFF;
				margin-top: 5px;
				font-size: 12px;
			}
			
			.heigh1 {
				width: 50%;
				float: left;
				color: #FF6600;
			}
			
			.heigh2 {
				width: 50%;
				float: right;
				color: #FF6600;
			}
			
			#noticesdiv {
				height: 40px;
				border-radius: 5px;
				background-color: white;
				overflow: hidden;
				margin-top: 5px;
			}
			
			#notices {
				height: auto;
			}
			
			#notices li {
				height: 40px;
			}
			
			.lunbo {
				height: 180px;
				background-size: 100%, 100%;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.mui-media {
				font-size: 14px;
			}
			
			.mui-table-view .mui-media-object {
				max-width: initial;
				width: 90px;
				height: 70px;
			}
			
			.meta-info {
				position: absolute;
				left: 115px;
				right: 15px;
				bottom: 8px;
				color: #8f8f94;
			}
			
			.meta-info .author,
			.meta-info .time {
				display: inline-block;
			}
			
			.meta-info .time {
				float: right;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				height: 0;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 1px;
			}
			
			.lunboimg {
				width: 100%;
				height: 180px;
			}
			
			.mui-media-body p {
				color: #282633;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="aicVue" v-cloak>
			<div id="slider" class="mui-slider lunbo">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item" v-if="lunboImages.length > 0">
						<a href="#">
							<img class="lunboimg" :src="lunboImages[lunboImages.length-1].newsImg">
						</a>
					</div>
					<div class="mui-slider-item" v-for="(item,index) in lunboImages" @click="open_detail(item)">
						<a href="#">
							<img class="lunboimg" :src="item.newsImg">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item" v-if="lunboImages.length > 0">
						<a href="#">
							<img class="lunboimg" :src="lunboImages[0].newsImg">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div :class="[index==0 ? 'mui-active' : '', 'mui-indicator']" v-for="(item,index) in lunboImages"></div>
				</div>
			</div>
			<div id="noticesdiv" v-show="notices.length>0">
				<ul class="mui-table-view" id="notices">
					<li class="mui-table-view-cell mui-media noborder" v-for="item in notices" @click="openNoticeDetail(item)">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="../images/alert_horn.png" style="width: 20px;height: 20px;">
							<div class="mui-media-body">
								<p class='mui-ellipsis'>{{item.title}}</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="heigh">
				<div class="heigh1" @click="open('echarts','echarts.html')">
					<span>1 AIC ≈ ${{price}}</span><br />
				</div>
				<div class="heigh2">
					<span>总资产 ≈ ￥{{asset}}</span><br />
				</div>
			</div>

			<div id="list" class="mui-scroll-wrapper" style="margin-top: 5px;">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media" v-for="item in items">
							<a href="javascript:;" :data-guid="item.guid" @tap="open_detail(item)">
								<img class="mui-media-object mui-pull-left" :src="item.newsImg">
								<div class="mui-media-body">
									<div class="mui-ellipsis-2" style="color: #282633;font-size: 12px;">{{item.content}}</div>
								</div>
								<div class="meta-info">
									<div class="author"></div>
									<div class="time" style="color: #282633;font-size: 12px;">{{item.createTime}}</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../js/jquery-1.8.3.min.js "></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#aicVue',
				data: {
					items: [], //列表信息流数据
					notices: [],
					lunboImages: [],
					price: 0,
					asset: 0
				},
				mounted: function() {
					mui.plusReady(function() {
						//预加载详情页
						webview_detail = mui.preload({
							url: 'news-detail.html',
							id: 'news_detail',
							styles: {
								"render": "always",
								"popGesture": "hide",
								"bounce": "vertical",
								"bounceBackground": "#efeff4",
								"titleNView": titleNView
							}
						});
						vm.marketInfo();
						pulldownRefresh();
						getNotices();
					});
				},
				methods: {
					open: function(vid, url) {
						mui.openWindow({
							id: vid,
							url: url,
						});
					},
					marketInfo: function() {
						mui.postJSON(MarketInfo, {}, function(result) {
							if(result.code == 0) {
								vm.price = result.priceBookUSD.closePrice;
								vm.asset = result.asset;
								plus.storage.setItem("priceBook", JSON.stringify(result.priceBook));
								plus.storage.setItem("priceBookUSD", JSON.stringify(result.priceBookUSD));
							}
						});
					}
				}
			});
			//自动滚动公告列表
			var speed = 100;
			var MyMar = null;
			//开始滚动列表
			function startRollList(num) {
				var demo = document.getElementById("noticesdiv");

				function Marquee() {
					//判断scroll是否滚动到底部
					if((demo.scrollHeight - demo.scrollTop) === demo.clientHeight) {
						setTimeout(function() {
							clearInterval(MyMar);
							demo.scrollTop = 0;
							MyMar = setInterval(Marquee, speed);
						}, 3000);
					} else {
						demo.scrollTop = demo.scrollTop + 1;
					}
				}

				if(num > 1) {
					if(MyMar) {
						clearInterval(MyMar);
					}
					MyMar = setInterval(Marquee, speed);
				}
			}

			//进入公告详情
			function openNoticeDetail(item) {
				mui.openWindow({
					id: "notice-detail",
					url: "notice-detail.html",
					extras: {
						noticeId: item.id
					}
				});
			}

			////////
			var lastId = '',
				minId = ''; //最新新闻的id 
			var webview_detail = null; //详情页webview
			var titleNView = { //详情页原生导航配置
				backgroundColor: '#f7f7f7', //导航栏背景色
				titleText: '', //导航栏标题
				titleColor: '#000000', //文字颜色
				type: 'transparent', //透明渐变样式
				autoBackButton: true, //自动绘制返回箭头
				splitLine: { //底部分割线
					color: '#cccccc'
				}
			}

			//mui初始化，配置下拉刷新
			mui.init({
				pullRefresh: {
					container: '#list',
					down: {
						style: 'circle',
						callback: function() {
							vm.marketInfo();
							pulldownRefresh();
							getNotices();
						}
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 *  下拉刷新获取新闻最新列表 
			 */
			function pulldownRefresh() {
				if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
					plus.nativeUI.toast('似乎已断开与互联网的连接', {
						verticalAlign: 'top'
					});
					return;
				}

				page = 1;
				var data = {
					"page": page
				}
				mui.postParam(GetNewsList, data, function(result) {
					mConsole.log("获取新闻列表：" + JSON.stringify(result));
					if(result.code == 0) {
						totalPage = result.page.totalPage;
						cuPage = result.page.currPage;
						vm.items = result.page.list;
						vm.lunboImages = [];
						for(var i = 0; i < 5 && i < vm.items.length; i++) {
							vm.lunboImages.push(vm.items[i]);
						}
					} else {
						mymui(result.msg);
					}
					mui('#list').pullRefresh().endPulldownToRefresh(); //参数为true代表没有更多数据了。
					if(cuPage >= totalPage) {
						mui('#list').pullRefresh().disablePullupToRefresh();
					} else {
						mui('#list').pullRefresh().enablePullupToRefresh();
					}

					vm.$nextTick(function() {
						//获得slider插件对象
						var gallery = mui('.mui-slider');
						gallery.slider({
							interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
						});
					});
				});
			}

			/**
			 * 上拉加载拉取历史列表 
			 */
			function pullupRefresh() {
				page += 1;
				var data = {
					"page": page
				};
				mui.postParam(GetNewsList, data, function(result) {
					mConsole.log("加载更多列表：" + JSON.stringify(result));
					if(result.code == 0) {
						totalPage = result.page.totalPage;
						cuPage = result.page.currPage;
						if(page == 1) {
							vm.items.splice(0, vm.items.length);
						}
						vm.items = vm.items.concat(result.page.list);
						page += 1;
					} else {
						mymui(result.msg);
					}
					mui('#list').pullRefresh().endPullupToRefresh(cuPage >= totalPage);
				});
			}

			/**
			 * 打开新闻详情
			 * 
			 * @param {Object} item 当前点击的新闻对象
			 */
			function open_detail(item) {
				//触发子窗口变更新闻详情
				mui.fire(webview_detail, 'get_detail', {
					guid: item.id,
					title: item.title,
					author: "",
					time: item.createTime,
					cover: item.newsImg
				});

				//更改详情页原生导航条信息
				titleNView.titleText = item.title;
				webview_detail.setStyle({
					"titleNView": titleNView
				});
				setTimeout(function() {
					webview_detail.show("slide-in-right", 300);
				}, 150);
			}

			var page = 1;
			var totalPage = 1; //总页码
			var cuPage = 1; //当前页码
			//刷新公告
			function getNotices() {
				page = 1;
				var data = {
					"page": page,
					"limit": 5
				}
				mui.postParam(GetNotices, data, function(result) {
					mConsole.log("获取首页公告列表：" + JSON.stringify(result));
					if(result.code == 0) {
						totalPage = result.page.totalPage;
						cuPage = result.page.currPage;

						vm.notices.splice(0, vm.notices.length);
						vm.notices = vm.notices.concat(result.page.list);

						//startRollList(vm.notices.length);
					} else {
						mymui(result.msg);
					}
				});
			}
		</script>
	</body>

</html>